<template>
	<view>
		<!-- 顶部区域 -->
		<view class="top-box">
			<view class="top-navigation">
				<!-- 相机 -->
				<view class="camera">
					<!-- <u-icon name="camera" size="30"></u-icon> -->
				</view>
				<!-- 关注 发现 -->
				<view class="follow-discover">
					<text v-for="(item,index) in followAndDiscover" :key="index"
						:class="followAndDiscoverIndex == index ? '': 'light-gray-text'"
						@click="followDiscoverClick(item,index)">{{item.text}}</text>
				</view>
				<!-- 头像 -->
				<image src="../../static/community/headPortrait.png" mode="" @click="myHomepage"></image>
			</view>
			<!-- 搜索 -->
			<view class="search-box" @click="searchArea">
				<u-search placeholder="请输入搜索内容" v-model="searchValue" :showAction="false" actionText="搜索"
					:animation="true"></u-search>
			</view>
			<u-tabs :list="tabsList" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
			            color: 'red',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
		</view>
		<!-- 列表 -->
		<view class="list">
			<view v-for="(item,index) in dataList" :key="index" class="list-item" @click="communityDetails">
				<image :src="item.url" style="width: 100%;"></image>
				<view class="shop-name">
					<text>生鲜团购小程序，在线团购</text>
				</view>
				<!--  -->
				<view class="list-item-name">
					<view class="list-item-tooux">
						<image src="../../static/community/headPortrait.png" style="width: 35rpx; height: 35rpx;">
						</image>
						<text>嗨品软件-阿奇</text>
					</view>
					<view class="love-num">
						<image src="../../static/community/love.png" style="width: 35rpx; height: 35rpx;"></image>
						<text>11</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 关注     发现
				followAndDiscoverIndex: 1,
				followAndDiscover: [{
						text: '关注',
						key: 0
					},
					{
						text: '发现',
						key: 1
					}
				],
				// 全部 随拍 发现
				tabsList: [{
						name: '全部'
					},
					{
						name: '爱拍'
					},
					{
						name: '发现'
					},
				],
				// 内容列表
				dataList: [{
						url: 'https://cdn.uviewui.com/uview/album/1.jpg'
					},
					{
						url: 'https://cdn.uviewui.com/uview/album/2.jpg'
					},
					{
						url: 'https://cdn.uviewui.com/uview/album/3.jpg'
					},
					{
						url: 'https://cdn.uviewui.com/uview/album/4.jpg'
					},
					{
						url: 'https://cdn.uviewui.com/uview/album/5.jpg'
					},
					{
						url: 'https://cdn.uviewui.com/uview/album/6.jpg'
					},
					{
						url: 'https://cdn.uviewui.com/uview/album/7.jpg'
					},
					{
						url: 'https://cdn.uviewui.com/uview/album/8.jpg'
					},
					{
						url: 'https://cdn.uviewui.com/uview/album/9.jpg'
					},
				]
			}
		},
		methods: {
			// 关注/发现切换
			followDiscoverClick(item, index) {
				this.followAndDiscoverIndex = index
			},
			// 跳转社区内容详情页面
			communityDetails(){
				uni.navigateTo({
					url:'/pages/index/communityDetails/communityDetails'
				})
			},
			// 点击头像跳转我的主页
			myHomepage(){
				uni.navigateTo({
					url:'/pages/index/myHomepage/myHomepage'
				})
			},
			// 顶部搜索框跳转搜索页面
			searchArea(){
				uni.navigateTo({
					url:'/pages/index/searchArea/searchArea'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		column-count: 2; //想要排成的列数
		column-gap: 0;

		margin-top: 300rpx;
		// width: 96%;
		padding: 0 2%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.list-item {
			width: 48%;
			// height: 500rpx;
			border-radius: 15rpx;
			margin-bottom: 20rpx;
			background-color: #fff;

			.shop-name {
				display: -webkit-box; //对象作为弹性伸缩盒子模型显示 
				-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式 
				-webkit-line-clamp: 2; //溢出省略的界限
				overflow: hidden;
			}

			.list-item-name {
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				line-height: 20rpx;
				font-size: 28rpx;

				text {
					margin-top: 8rpx;
				}

				.list-item-tooux {
					display: flex;

					text {
						margin-left: 5rpx;
					}
				}

				.love-num {
					display: flex;
				}
			}

		}
	}

	.top-box {
		width: 100%;
		height: 270rpx;
		position: fixed;
		top: -1rpx;
		background-color: white;

		.top-navigation {
			width: 96%;
			margin: auto;
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0;
			.follow-discover {
				width: 180rpx;
				display: flex;
				justify-content: space-between;

				.light-gray-text {
					color: #888888;
				}
			}

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.search-box {
			width: 95%;
			height: 100rpx;
			margin: 0 auto;

			input: {
				margin: auto;
			}
		}
	}
</style>